Conversation
echarts-bot
bot
added
PR: author is committer
PR: awaiting review
PR: doc unchanged
labels
|
Thanks for your contribution! The pull request is marked to be |
| // Fix extent of category angle axis | ||
| if (angleAxis.type === 'category' && !angleAxis.onBand) { | ||
| const extent = angleAxis.getExtent(); | ||
| const diff = 360 / (angleAxis.scale as OrdinalScale).count(); |
There was a problem hiding this comment.
We can see that the old code takes 360 as the range of endAngle to startAngle, which is not always the case.
|
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20184@1c08b2f |
| const diff = spanAngle / (angleAxis.scale as OrdinalScale).count(); | ||
| if (Math.abs(spanAngle + diff) >= 360) { | ||
| extent[1] += Math.abs(diff); | ||
| angleAxis.setExtent(extent[0], extent[1]); |
There was a problem hiding this comment.
In the current modified approach, this cases are not reasonable enougth:
(already have a overlap between bar C and bar D)
(endAngle changes a little (from -195 to -198) but the appearance changes significantly.)
I think the "adjusting the extent" is a compromise. It's counter intuitive (the adjusted endAngle is not what use specified) but with out that user have avoid overlap manually.
I just try to modify it: make it keep at a "max span" when there is no enough space.
// Fix extent of category angle axis
if (angleAxis.type === 'category' && !angleAxis.onBand) {
const extent = angleAxis.getExtent();
let spanAngle = normalizeAngle((normalizeAngle(extent[1]) + 360 - normalizeAngle(extent[0])));
if (angleAxis.inverse) {
spanAngle = 360 - spanAngle;
}
const spanLimit = 360 - 360 / (angleAxis.scale as OrdinalScale).count();
if (spanAngle >= spanLimit) {
extent[1] = extent[0] + (angleAxis.inverse ? -1 : 1) * spanLimit;
angleAxis.setExtent(extent[0], extent[1]);
}
}
// FIXME: this kind of function should be placed in some common util file? (or similar one already exists?)
// Normalize an angle value to `[0, 360)`.
function normalizeAngle(val: number) {
val = val % 360;
val < 0 && (val += 360);
return val;
}(it's just a illustrative code to show my current understanding.)
But about clockwise (inverse). I haven't understood the logic yet.
The current behavior (before this PR modified) seems weird:
There was a problem hiding this comment.
I'm not quite sure if we should use normalizeAngle because it erases some information. For example, with extent: [90, -450], it's more intuitive to understand this as a circle and a half. With normalizeAngle((normalizeAngle(extent[1]) + 360 - normalizeAngle(extent[0]))); we get => normalizeAngle(90 + 360 - 270) => normalizeAngle(180) => 180, which is a half circle. We could say we don't support a circle and a half as spanAngle so that one circle is used, but a half circle? I don't think this is expected with extent: [90, -450].
So I implemented this with a simpler logic: let spanAngle = (extent[1] - extent[0]) * (angleAxis.inverse ? -1 : 1);, which I tested to be right. Correct me if I'm wrong.
As for clockwise: false, I think this should be regarded as another bug because it's not introduced in this PR so I suggest fixing this in future PRs.
3 participants
Brief Information
This pull request is in the type of:
What does this PR do?
When angleAxis in the polar system has
boundaryGap: false, the extent is adjusted since this commit so that polar bars don't overlap each other. The main idea is to make extra space according to data count. But it may overkill in some situations.Fixed issues
NA.
This PR is not a fix to #20172 , which is not a bug.
Details
Before: What was the problem?
Consider the case when
startAngle: 90, endAngle: -90, before this PR, it has the result of:This is not as expected because a developer set
startAngle: 90, endAngle: -90would expect the range to be half a circle.After: How does it behave after the fixing?
The extent of angleAxis with
boundaryGap: falseshould only be adjusted if it has the potential to overlap, that is to say,startAngle: 90, endAngle: -90should still get half a circle:while
startAngle: 90, endAngle: -270should get 3/4 of a circle:Please also not that if the range of startAngle and endAngle itself is over 360 degrees, it won't adjust to be smaller than a circle because it is not expected to.
Document Info
One of the following should be checked.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
I added a test case under
test/bar-polar-basic-radial.html.I've run with
npm run test:visualand it passes all but the above case.Others
Merging options
Other information